<template>
  <el-row class="bgf">
    <el-col :span="12" :offset="5">
      <!-- model表单的数据 -->
      <!-- rules：校验规则 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- prop="type"校验 ，v-model="ruleForm.type"传值-->
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="ruleForm.rolename"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="menus">
          <!-- data树形控件的数据 -->
          <!-- show-checkbox显示选框 -->
          <!-- default-expand-all默认展开所有选项 -->
          <!-- node-key:id 通过id选择节点 -->
          <!-- highlight-current高亮选中项 -->
          <!-- props：其他选项，包含文字显示和子节点 -->
          <el-tree
            :data="memuRoleList"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="$route.params.id > 0"
            type="primary"
            @click="submitForm('ruleForm')"
            >立即修改</el-button
          >
          <el-button v-else type="success" @click="submitForm('ruleForm')"
            >立即添加</el-button
          >
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        rolename: "",
        status: 1,
        menus: [],
      },
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
      // 树形控件的权限列表
      memuRoleList: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    };
  },
  created() {
    // 获取树形控件的数据
    this.getMenuData();
    // 判断新增还是修改
    if (this.$route.params.id > 0) {
      // 有params说明是修改，发请求
      this.getDataById(this.$route.params.id);
    }
  },
  methods: {
    // 获取树形控件的数据，注意istree=1
    getMenuData() {
      this.$http('/menulist',{params: {istree: 1}})
        .then(res => {
          this.memuRoleList = res.list;
        })
    },
    // 根据id获取角色详情
    getDataById(id) {
      this.$http
        .get("/roleinfo", { params: { id } })
        .then((res) => {
          // 回显
          this.ruleForm = res.list;
          this.ruleForm.menus = res.list.menus.split(',');
          // 设置树形数据的勾选
          this.$refs.tree.setCheckedKeys(this.ruleForm.menus);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 先验证，通过后发请求
    submitForm(formName) {
      // this.$refs[formName]通过refs找到这个表单，然后验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$refs.tree：通过vue的refs方法查找dom节点
          // getCheckedKeys 获取被用户选择的节点，组成数组（选中的节点以及父级节点）
          // [数组1].concat([数组2]) ;
          this.ruleForm.menus = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) ;
          // 成功之后发请求
          if (this.$route.params.id > 0) {
            this.ruleForm.id = this.$route.params.id;
            // 修改
            this.$http
              .post("/roleedit", this.ruleForm)
              .then((res) => {
                // 添加成功后返回列表页
                this.$router.go(-1);
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            // 新增
            this.$http
              .post("/roleadd", this.ruleForm)
              .then((res) => {
                // 添加成功后返回列表页
                this.$router.go(-1);
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>